<template>
  <view>
    <!-- 饮食剂量 -->
    <view class="card">
      <view class="card_title">
        <image src="https://s1.ax1x.com/2023/05/04/p9tYgBV.png" mode=""></image>
        <text class="title_name">餐前胰岛素剂量</text>
      </view>
      <!-- 选择就餐时间 -->
      <view class="diet_content">
        <view class="content_l">请选择就餐时间</view>
        <u-dropdown id="dropdown">
          <u-dropdown-item class="" v-model="value1" :title="title" :options="options1" @change='handlerTime'></u-dropdown-item>
        </u-dropdown>
      </view>
      <view class="diet_content">
        <view class="content_l">
          <!-- <text>准备吃碳水化合物</text> -->
          <text>碳水化合物数量准备吃</text>
        </view>
        <!-- <view class="count">16</view> -->
        <input type="digit" class="count" v-model.trim="ts_count">
        <view class="danwei">g</view>
      </view>
      <view class="diet_content1">
        <view class="content_l">胰岛素碳水化合物比值</view>
        <!-- <view class="count">10</view> -->
        <!-- <input type="digit" class="count" v-model.trim="yds_ratio"> -->
         <view class="count" style="background-color: #eee;">{{ yds_ratio }}</view>
        <view class="danwei">I/Carb</view>
      </view>
    </view>
    <!-- 纠正计量 -->
    <view class="card jiuzheng">
      <!-- 标题 -->
      <view class="card_title">
        <image src="https://s1.ax1x.com/2023/05/04/p9tXUNn.png" mode=""></image>
        <text class="title_name">纠正剂量</text>
      </view>
      <!-- 具体内容 -->
      <!-- 当前血糖 -->
      <view class="diet_content jz_content">
        <view class="content_l">当前血糖</view>
        <view class="jz_content_r">
          <!-- <view class="count">9.8</view> -->
          <input type="digit" class="count" v-model.trim="now_xt">
          <view class="danwei">mmol/L</view>
        </view>
      </view>
      <!-- 目标血糖 -->
      <view class="diet_content jz_content">
        <view class="content_l">目标血糖</view>
        <view class="jz_content_r">
          <!-- <view class="count">6.0</view> -->
          <input type="digit" class="count" v-model.trim="target_xt">
          <view class="danwei">mmol/L</view>
        </view>
      </view>
      <!-- 胰岛素敏感系数（ISF） -->
      <view class="diet_content jz_content">
        <view class="content_l">胰岛素敏感系数（ISF）</view>
        <view class="jz_content_r">
          <view class="count" style="background-color: #eee;">{{ ISF }}</view>
          <view class="danwei">mmol/L</view>
        </view>
      </view>
      <!-- 胰岛素类型选择 -->
      <view class="diet_content jz_content">
        <view class="content_l">
          <picker @change="bindPickerChange2" :value="idx" :range="insulinTypeArr" range-key="name">
            <text>{{insulinTypeArr[idx].name || '选择胰岛素类型'}}</text>
            <image src="https://s1.ax1x.com/2023/09/09/pPcM7qK.png" style="width: 50rpx;height: 50rpx;vertical-align: middle;"></image>
          </picker>
        </view>
        <view class="jz_content_r">
          <input type="digit" class="count" v-model.trim="Rapid_acting">
          <view class="danwei">mmol/L</view>
        </view>
      </view>
      <!-- 每日胰岛素剂量 -->
      <view class="diet_content jz_content">
        <view class="content_l">每日胰岛素剂量</view>
        <view class="jz_content_r">
          <!-- <view class="count">9.8</view> -->
          <input type="digit" class="count" v-model.trim="Daily">
          <view class="danwei">mmol/L</view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="card card3">
      <!-- 上 -->
      <view class="card3_top">
        <view class="card_t_l">
          <view class="title_name">餐前胰岛素剂量</view>
          <view class="card3_t_content">
            <text>{{ ts_count }}/{{ yds_ratio }}</text>
            <text>={{ (ts_count/yds_ratio).toFixed(3) }}U</text>
          </view>
        </view>
        <view class="card_t_r">
          <view class="title_name">纠正剂量</view>
          <view class="card3_t_content">
            <text>({{ now_xt }}-{{ target_xt }})/{{ ISF }}</text>
            <text>={{ ((now_xt-target_xt)/ISF).toFixed(3) }}U</text>
          </view>
        </view>
      </view>
      <!-- 下 -->
      <view class="card3_footer">

        <view class="card3_f_title">
          <text>{{title}}</text>
          <text>纠正胰岛素用量为：</text>
        </view>
        <view class="card3_f_content">
          {{ (ts_count/yds_ratio).toFixed(3) }}+{{ ((now_xt-target_xt)/ISF).toFixed(3) }}={{(ts_count/yds_ratio + (now_xt-target_xt)/ISF).toFixed(3) }}U
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        ts_count: 16, // 碳水化合物数量准备吃
        yds_ratio: 10, // 胰岛素碳水化合物比值
        now_xt: 9.8, // 当前血糖
        target_xt: 6.0, // 目标血糖
        yds_xishu: null, // 胰岛素敏感系数（ISF）
        Rapid_acting: 6.0, // 速效胰岛素剂量
        Daily: 3.0, // 每日胰岛素剂量
        // 早中晚餐下拉菜单选项
        value1: 0,
        title: '早餐',
        options1: [{
            label: '早餐',
            value: 0,
          },
          {
            label: '午餐',
            value: 1,
          },
          {
            label: '晚餐',
            value: 2,
          },
        ],
        // 胰岛素类型
        idx:0,
        insulinTypeArr: [{
          name: '速效胰岛素剂量'
        }, {
          name: '慢效胰岛素剂量'
        }],
      };
    },
    computed: {
      // 计算 胰岛素敏感系数 
      ISF() {
        return 1800 / 25 / 18
      }
    },
    methods: {
      handlerTime(v) {
        this.title = this.options1[v].label
        console.log(this.value1);
      },
    // 胰岛素选择
    bindPickerChange2: function(e) {
      console.log(e.detail.value,11);
      this.idx = e.detail.value;
    }
    },
  }
</script>

<style lang="scss">
  page {
    padding-bottom: 40rpx;
    background: rgba(245, 246, 250, 1);
  }
  // 去掉下拉菜单的遮罩层
  /deep/ .u-dropdown__content__mask {
    opacity: 0;
  }

  // 下拉菜单
  /deep/ #dropdown {
    display: flex;
    align-items: center;
    height: 54rpx;
    width: 100rpx;
    border-radius: 16rpx;
    border: 1px solid rgba(166, 166, 166, 1);
    // background-color: pink;
  }

  // 饮食剂量
  .card {
    width: 672rpx;
    // height: 306rpx;
    border-radius: 16px;
    margin: 0 auto;
    margin-top: 86rpx;
    padding: 22px 24rpx;
    // padding-top: 22rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);

    // 标题
    .card_title {
      display: flex;
      align-items: center;

      image {
        width: 60rpx;
        height: 60rpx;
      }

      .title_name {
        margin-left: 16rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(73, 69, 75, 1);
      }
    }

    // 具体内容
    .diet_content,
    .diet_content1 {
      display: flex;
      align-items: center;
      margin-top: 24rpx;
      font-size: 32rpx;
      color: rgba(73, 69, 75, 1);

      .content_l {
        width: 378rpx;
      }

      .count {
        // display: flex;
        // justify-content: center;
        // align-items: center;
        width: 140rpx;
        height: 54rpx;
        line-height: 54rpx;
        text-align: center;
        border-radius: 16rpx;
        margin-right: 10rpx;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(166, 166, 166, 1);
        // margin-left: 48rpx;
      }

      .danwei {
        margin-left: 20rpx;
        font-size: 28rpx;
        color: rgba(73, 69, 75, 1);
      }
    }

    .diet_content1 {
      margin-top: 44rpx;
    }
  }

  // 纠正计量
  .jiuzheng {
    // height: 358rpx;
    margin: 56rpx auto;
    padding: 22px 24rpx;

    .jz_content {
      .jz_content_r {
        display: flex;

        .danwei {
          margin: 0;
        }
      }
    }
  }

  // 
  .card3 {
    height: 470rpx;
    margin: 0 auto;

    .card3_top {
      display: flex;
      justify-content: space-between;

      .card_t_l,
      .card_t_r {
        width: 288rpx;
        text-align: center;

        .title_name {
          font-size: 32rpx;
          font-weight: 400;
          color: rgba(73, 69, 75, 1);
        }

        .card3_t_content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 288rpx;
          height: 118rpx;
          border-radius: 16rpx;
          margin-top: 54rpx;
          background: rgba(253, 218, 129, 1);

          text {
            font-size: 32rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }
        }
      }
    }

    // 下
    .card3_footer {
      margin-top: 48rpx;

      .card3_f_title {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(73, 69, 75, 1);
      }

      .card3_f_content {
        margin-top: 24rpx;
        font-size: 48rpx;
        font-weight: 400;
        text-align: center;
        color: rgba(255, 121, 83, 1);
      }
    }
  }
</style>
